<template>
    <div>
        <h3>问答系统</h3>
      <input type="text" ref="question">
      <button @click="getQuestionData">搜索</button>
      <echarts2d :rela="question_data" v-if="question_data"></echarts2d>
      <img :src="'data:image/png;base64,' + question_img_url" alt="" v-if="question_img_url">
      <dl v-html="question_h5"></dl>
    </div>
  </template>
  
  <script>
  import {request} from '@/network/request'
  import Echarts2d from '@/components/Echarts2d.vue'
    export default {
      name: 'question',
      components: {
          Echarts2d
      },
      data() {
          return {
             question_data: null,
             question_img_url: '',
             question_h5: ''
          }
      },
      methods: {
          async getQuestionData() {
            const value = this.$refs.question.value.trim()
            if (!value) return alert('请先输入问题')
            const res = await request({
                url: '/KGQA_answer',
                params: {name: value}
            })
            console.log(res);
            this.question_data = res.content[0]
            this.question_h5 = res.content[1]
            this.question_img_url = res.content[2]
          }
      },
      updated() {
        const dts = document.querySelectorAll('dt')
        const dds = document.querySelectorAll('dd')

        dts.forEach((item) => {
            item.style.float = 'left'
            item.style.width = 80 + 'px'
        })
        dds.forEach((item) => {
            item.style.width = 250 + 'px'
        })
      },
  }
  </script>
  
  <style scoped>
  </style>
  
  